<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script>
if (window.internals)
    internals.runtimeFlags.langAttributeAwareFormControlUIEnabled = true;
else
    debug('Require testRunner.');
</script>
<style>
:invalid {
  background-color: #ff0000;
}
</style>
</head>
<body>
<div id=parent>
<input type=number id=number>
<input id=another>
<input type="number" lang="ar-eg" id="number_ar">
</div>
<script>
description('A number input fields with a bad input string should make validity.badInput true and have :invalid style.');

function colorOf(el) {
    return document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color');
}
var invalidStyleColor = 'rgb(255, 0, 0)';

var number = document.getElementById('number');
number.focus();
debug('Initial state. The element has no value.');
shouldNotBe('colorOf(number)', 'invalidStyleColor');
shouldBeFalse('number.validity.badInput');

debug("Type '-'. The element becomes badInput.");
document.execCommand('InsertText', false, '-');
shouldBe('colorOf(number)', 'invalidStyleColor');
shouldBeFalse('number.validity.valid');
shouldBeTrue('number.validity.badInput');
shouldBeEqualToString('number.value', '');

debug("Type '1' additionally. The element becomes valid.");
document.execCommand('InsertText', false, '1');
shouldNotBe('colorOf(number)', 'invalidStyleColor');
shouldBeFalse('number.validity.badInput');
shouldBeEqualToString('number.value', '-1');

debug("Type 'e' additionally. The element becomes badInput again.");
document.execCommand('InsertText', false, 'e');
shouldBe('colorOf(number)', 'invalidStyleColor');
shouldBeTrue('number.validity.badInput');
shouldBeEqualToString('number.value', '');

debug("The element losts focus. The element state should not be changed.");
document.getElementById('another').focus();
shouldBe('colorOf(number)', 'invalidStyleColor');
shouldBeTrue('number.validity.badInput');
// Visible value is '-1e'.
number.focus();
document.execCommand('SelectAll');
shouldBeEqualToString('document.getSelection().toString()', '-1e');
shouldBeEqualToString('number.value', '');

debug("The element losts a renderer. The element state should not be changed.");
shouldBeTrue('number.style.display = "none"; number.validity.badInput');

number.style.display = 'inline-block';
number.focus();
debug('A bad input should be cleared by value="".');
shouldBeEqualToString('number.value = ""; document.execCommand("SelectAll"); document.getSelection().toString()', '');

debug('Setting a valid value via |value| IDL attribute should clear badInput.');
document.execCommand('InsertText', false, '-'); // Incomplete number
shouldBeTrue('number.validity.badInput');
shouldBeFalse('number.checkValidity()');
number.value = '123';
shouldBeFalse('number.validity.badInput');
shouldBeTrue('number.checkValidity()');

number.value = '';
debug("' ' is not a badInput.");
document.execCommand('InsertText', false, ' ');
shouldBeFalse('number.validity.badInput');
shouldBeEqualToString('number.value', '');
debug("' +' is a badInput.");
document.execCommand('InsertText', false, '+');
shouldBeTrue('number.validity.badInput');
shouldBeEqualToString('number.value', '');
debug("' +1' is not a badInput.");
document.execCommand('InsertText', false, '1');
shouldBeFalse('number.validity.badInput');
shouldBeEqualToString('number.value', '1');
debug("' +1.' is not a badInput.");
document.execCommand('InsertText', false, '.');
shouldBeFalse('number.validity.badInput');
shouldBeEqualToString('number.value', '1');
debug("' +1. ' is not a badInput.");
document.execCommand('InsertText', false, ' ');
shouldBeFalse('number.validity.badInput');
shouldBeEqualToString('number.value', '1');

var number_ar = document.getElementById('number_ar');
number_ar.focus();
debug("Arabic number is not a badInput.");
var arabicNum = Number(1.1).toLocaleString('ar-eg');
document.execCommand('InsertText', false, arabicNum);
// Windows seems to have issues with Arabic decimal separator, so use dot.
var isWindows = (number_ar.value == '11');
if (isWindows)
{
  arabicNum = arabicNum.replace(arabicNum[1], '.');
  number_ar.value = "";
  document.execCommand('InsertText', false, arabicNum);
}
shouldBeFalse('number_ar.validity.badInput');
shouldBeEqualToString('number_ar.value', '1.1');
debug("Arabic number with two decimal separators is a badInput.");
document.execCommand('InsertText', false, arabicNum[1]);
shouldBeTrue('number_ar.validity.badInput');
shouldBeEqualToString('number_ar.value', '');

document.getElementById('parent').innerHTML = '';
</script>
</body>
</html>
